<template lang="html">
  <div id="pageBox">
    <div class="pageTitle">
      <span class="iconfont icon-riqi"></span>
      <span class="title">180天精英成长计划</span>
      <span class="date">{{ year }}年{{ month }}月</span>
    </div>
    <div class="aboutStudy pd14">
      <div class="item item1">
        <div class="centerContent cl">
          <router-link :to="{path: '/payCredit', query: { totalCredit: eduInfo.totalCredit }}">
            <div class="icon">
              <span class="iconfont icon-chaxun"></span>
            </div>
            <div class="text">
              <p class="num">{{ eduInfo.totalCredit || 0 }}</p>
              <p class="note">学分查询</p>
            </div>
          </router-link>
        </div>
      </div>
      <div class="geli"></div>
      <div class="item item2">
        <div class="centerContent cl">
          <router-link to="/studyPlan">
            <div class="icon">
              <span class="iconfont icon-jihua"></span>
            </div>
            <div class="text">
              <p class="num">{{ eduInfo.learnPlan }}</p>
              <p class="note">学习计划</p>
            </div>
          </router-link>
        </div>
      </div>
    </div>
    <div class="eduList pd14">
      <div class="eduContent">
        <div class="listTitle">
          《{{ eduInfo.bookName }}》
        </div>
        <ul class="listBox">
          <li class="item" v-for="(v,i) in eduInfo.dayNumVoList" :key="i" @click="!v.readLock && onReadBook(v.dayNumId, eduInfo.bookName, i + 1)">
            <span class="day">第{{ v.day }}天</span>
            <span class="name">{{ v.name }}</span>
            <span class="note">
              <!-- <span class="ka">已打卡</span>
              <span class="ka">未打卡</span> -->
              <span v-if="v.readLock" class="icon iconfont icon-suo"></span>
            </span>
          </li>
        </ul>
      </div>

    </div>
  </div>
</template>

<script>
import { getTeachingTask } from '@/api/pay'
export default {
  data(){
    return {
      year: new Date().getFullYear(),
      month: new Date().getMonth() + 1,
      eduInfo: {},
    }
  },
  created() {
    this.getData()
  },
  methods:{
    getData() {
      getTeachingTask().then(res => {
        this.eduInfo = res.data
        console.log(this.eduInfo)
      })
    },
    onReadBook(dayNumId, bookName, chap){
      let query = { dayNumId, bookName, chap }
      this.$router.push({
        path:"/payRead",
        query
      })
    },
  }
}
</script>

<style lang="less" scoped>
  #pageBox{
    height:100%;
    overflow-y:scroll;
    -webkit-overflow-scrolling: touch;
    .pageTitle{
      padding:0.1rem 0.14rem;
      .date{
        float:right;
      }
    }
    .aboutStudy{
      display: flex;
      .item{
        position:relative;
        flex:1;
        height: 1rem;
        border-radius: 0.1rem;
        padding:0.2rem 0;
        text-align: center;
        &.item1{
          background:#4B4BF9;
        }
        &.item2{
          background:#57B1ED;
        }
        .centerContent{
          display: inline-block;
          color:#fff;
          .icon{
            float:left;
            width:0.6rem;
            height:0.6rem;
            border-radius: 50%;
            text-align: center;
            .iconfont{
              line-height: 0.6rem;
              font-size:0.5rem;
              color:#fff;
            }
          }
          .text{
            float:left;
            padding:0.1rem 0;
            padding-left:0.1rem;
            color: #fff;
            .num,.note{
              text-align: left;
              line-height: 0.2rem;
            }
          }
        }
      }
      .geli{
        width:0.1rem;
      }
    }
    .eduList{
      margin-bottom:0.2rem;
      .eduContent{
        margin-top:0.1rem;
        border:1px solid #dedede;
        border-radius: 10px;
        padding:0 0.1rem;
        .listTitle{
          color:#999;
          font-size:0.12rem;
          line-height: 0.38rem;
          border-bottom:1px dashed #dedede;
        }
        .listBox{
          .item{
            display: flex;
            line-height: 0.46rem;
            border-bottom:1px solid #dedede;
            &:last-child{
              border-bottom:0;
            }
            .day{
              width:60px;
              font-size:0.12rem;
              color:#31c27c;
              &.after{
                color:#999;
              }
            }
            .name{
              flex:1;
            }
            .note{
              text-align: right;
              width:1.2rem;
              .ka{
                width:100%;
                padding:0.02rem 0.1rem;
                border:1px solid #999;
                font-size:0.12rem;
                border-radius:0.15rem;
                color:#999;
              }
            }
          }
        }
      }
    }
  }
</style>
